<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>delete</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/images/image/user.png">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/update/update.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/home_iconfont/iconfont.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/manage/manage_iconfont/iconfont.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/select/select_iconfont/iconfont.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/insert/insert_iconfont/iconfont.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/update/update_iconfont/iconfont.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/delete/delete_iconfont/iconfont.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/assets/student/add.css" />
    <link rel="stylesheet" type="text/css"
          href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css"/>

    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="${pageContext.request.contextPath}/js/assets/public/jquery-3.6.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/assets/public/laydate/laydate.js"></script>
    <!-- 弹窗插件 -->
    <script src="${pageContext.request.contextPath}/js/assets/public/layer/layer.js"></script>
    <script src="${pageContext.request.contextPath}/js/assets/student/update.js"></script>

    <script type="text/javascript">
        var ctx = "${ctx}";
        var success = "${success}";
        var error = "${error}";
        var sex = "${stu.sex}";
    </script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url(${pageContext.request.contextPath}/images/image/backgroud1.jpg) no-repeat;
            background-size: cover;
        }

        .box {
            width: 1200px;
            height: 540px;
            background: rgba(0, 0, 0, 0.2);
            margin: 0 auto;
            text-align: center;
            margin-top: 7%;

        }

        .box .left a {
            display: block;
            width: 200px;
            height: 90px;
            background: rgba(0, 0, 0, 0.2);
            font-size: 20px;
            color: #fff;
            text-decoration: none;
            padding-left: 30px;
            line-height: 90px;
        }

        .box .left a:hover {
            background-color: #ff6700;
        }

        .left {
            float: left;
            width: 230px;
            height: 540px;
            background-color: cadetblue;
            background: rgba(0, 0, 0, 0.2);
        }

        .right {
            float: right;
            width: 970px;
            height: 540px;
            background-color: rgba(152, 233, 233, 0.2);
        ;

        }

        .right>div {
            float: left;
            width: 470px;
            height: 540px;
            background: rgba(0, 0, 0, 0.2);
            margin-left: 14px;
            margin-bottom: 14px;
        }

        .right .one {
            background-color: rgba(152, 233, 233, 0.2);
        }

        .right .photo {
            width: 490px;
            height: 540px;
        }

        .right .one h1 {
            color: white;
            font-size: 60px;
        }

        .right .one p {
            font-size: 40px;
            font-weight: 500;
            color: rgb(148, 241, 248);
            font-style: italic;
        }
    </style>
    <script type="text/javascript">
        function updateData() {
            let names = ["id", "stuId", "name", "sex", "birthday", "phone", "email"];
            let data = {};
            for (let i in names) {
                data[names[i]] = $("[name=" + names[i] + "]").val();
            }
            console.log(data);

            $.ajax({
                url: "update",
                method: "POST",
                contentType: "application/json",
                data: JSON.stringify(data),
                success: function (data) {
                    console.log(data);
                    alert("success.");
                },
                error: function () {
                    alert("error.");
                },
                sync: false,
            });
        }
    </script>
</head>

<body>
<div class="nav">
    <a href="main" target="_self">
        <span class="iconfont icon-home_light"></span>
        首页</a>
    <a href="manage" target="_self">
        <span class="iconfont icon-renyuanxinxiguanli"></span>
        管理</a>
    <a href="select" target="_self">
        <span class="iconfont icon-chaxun"></span>
        查询</a>
    <a href="insert" target="_self">
        <span class="iconfont icon-charu"></span>
        插入</a>
    <a href="update" target="_self">
        <span class="iconfont icon-edit-1-copy"></span>
        更新</a>
    <a href="delete" target="_self">
        <span class="iconfont icon-shanchu"></span>
        删除</a>
</div>

<c:if test="${!success}">
    <div class="container">
        <h2>修改学生信息</h2>
        <form id="update-form" onsubmit="updateData()">
            <div>
                <label for="id">序号：</label> <input id="id" type="text" name="id" autocomplete="off" placeholder="请输入序号" value="${stu.id}">
            </div>
            <div>
                <label for="stuId">学号：</label> <input id="stuId" type="text" name="stuId" autocomplete="off" placeholder="请输入学号" value="${stu.stuId}">
            </div>
            <div>
                <label for="name">姓名：</label> <input id="name" type="text" name="name" autocomplete="off" placeholder="请输入姓名" value="${stu.name}">
            </div>
            <div>
                <label for="male">性别：</label>
                <input id="male" type="radio" name="sex" checked="checked" value="男"> <label for="male">男</label>
                <input id="female" type="radio" name="sex" value="女"> <label for="female">女</label>
            </div>
            <div>
                <label for="birthday">出生日期：</label> <input id="birthday" type="text" name="birthday" autocomplete="off"
                                                           placeholder="请输入出生日期，格式：yyyy-MM-dd" value="${stu.localBirthday}">
            </div>
            <div>
                <label for="phone">电话：</label> <input id="phone" type="text" name="phone" autocomplete="off" placeholder="请输入电话" value="${stu.phone}">
            </div>
            <div>
                <label for="email">邮箱：</label> <input id="email" type="text" name="email" autocomplete="off" placeholder="请输入电子邮箱" value="${stu.email}">
            </div>
            <div>
                <label></label>
                <button class="btn" type="reset">重置</button>
                <button id="submitBtn" class="btn" type=button>提交</button>
            </div>
        </form>
    </div>
</c:if>

</body>

</html>